@include comp(rule-list) {
  height: 100%;
  display: flex;
  flex-direction: column;

  .rule-list-head {
    border-bottom: solid 1px plv(border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .rule-list-operation {
      flex: 1;
      text-align: right;
      @include comp(button) {
        flex-shrink: 0;
      }
    }
  }

  .rule-list-body {
    flex: 1;
    overflow: hidden;
    position: relative;

    .rule-list-empty {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      @include comp(loading) {
        font-size: 20px;
      }
    }

    .rule-list-item {
      cursor: pointer;

      .rule-list-item-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all ease 300ms;
        border: solid 1px transparent;
        box-sizing: border-box;

        .rule-list-item-label {
          .rule-list-item-time {
            font-size: 12px;
            color: plv(text-4);
          }

          .rule-list-item-name {
            @include comp(icon) {
              color: plv(text-4);
              margin-left: 0.25em;
              vertical-align: -0.15em;
            }
          }
        }

        .rule-list-item-operation {
          cursor: pointer;
        }

        &:hover {
          background-color: plv(secondary-2);
        }
      }

      &[data-current-rule=true] {
        .rule-list-item-inner {
          background-color: plv(primary-light-2);
          border-color: plv(primary-3);
        }
      }
    }

    .rule-list-result-item {
      font-size: 12px;
      cursor: pointer;

      .rule-list-result-item-inner {
        border: solid 1px transparent;
      }

      td:first-child {
        white-space: nowrap;
      }

      &[data-rule-result-status=success] {
        .rule-list-result-item-inner {
          background-color: plv(success-light-2);
        }

        &[data-current-result=true] {
          .rule-list-result-item-inner {
            border-color: plv(success-3);
          }
        }
      }

      &[data-rule-result-status=error] {
        .rule-list-result-item-inner {
          background-color: plv(error-light-2);
        }

        &[data-current-result=true] {
          .rule-list-result-item-inner {
            border-color: plv(error-3);
          }
        }
      }

      .rule-list-result-item-time {
        font-size: 12px;
        color: plv(text-3);
      }

      .rule-list-result-item-msg {
        word-break: break-all;
      }
    }
  }

  @include sizeMixin(rule-list, ()) {
    .rule-list-head {
      padding: $margin;
    }
    .rule-list-body {
      padding: calc(#{$margin} / 2) 0;

      .rule-list-item {
        padding: 1px calc(#{$margin} / 2);

        .rule-list-item-inner {
          padding: calc(#{$margin} / 2);
          border-radius: $border-radius;
        }
      }

      .rule-list-result-item {
        padding: 2px calc(#{$margin} / 2) calc(#{$margin} / 2);

        .rule-list-result-item-inner {
          padding: calc(#{$margin} / 2);
          border-radius: $border-radius;
        }
      }
    }
  }
}
